<template>
  <div
    class="phone-container"
    :style="{ background: 'url('+bgImage+')', backgroundSize: 'cover'}"
  >
    <div class="phone-scroll">
      <el-scrollbar style="height: 100%;">
        <div style="padding: 10px" v-html="previewData" />
      </el-scrollbar>
    </div>

  </div>
</template>

<script>
import bgImage from '@/assets/images/previewPhone.png'
export default {
  name: 'PhonePreview',
  props: {
    previewData: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      'bgImage': bgImage
    }
  }
}
</script>

<style scoped lang="scss">
.phone-container{
  margin: 0 auto;
  width: 300px;
  height: 608px;
  position: relative;

  .phone-scroll{
    background: #2ac06d80;
    position: absolute;
    top: 66px;
    bottom: 66px;
    left: 16px;
    right: 16px;
    border-radius: 2px;
     *{
       user-select: none;
     }
  }
}
/deep/.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>
